<!doctype html>
<!-- We set all theme classes to allow critters to inline the theme styles and prevent flickering -->
<html lang="en" class="docs-dark-mode docs-light-mode">
  <head>
    <script>
      // This logic must execute early, so that we set the necessary
      // CSS classes to the document node and avoid unstyled content
      // from appearing on the page.
      const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference';
      const DARK_MODE_CLASS_NAME = 'docs-dark-mode';
      const LIGHT_MODE_CLASS_NAME = 'docs-light-mode';
      const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)';


      const theme = localStorage.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) ?? 'auto';
      const prefersDark =
        window.matchMedia && window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches;
      const documentClassList = this.document.documentElement.classList;

      // clearing classes before setting them.
      this.document.documentElement.className = '';
      if (theme === 'dark' || (theme === 'auto' && prefersDark)) {
        documentClassList.add(DARK_MODE_CLASS_NAME);
      } else {
        documentClassList.add(LIGHT_MODE_CLASS_NAME);
      }

      if(location.search.includes('uwu')) {
        documentClassList.add('uwu');
      }
    </script>
    <style>
      .uwu-logo {
        display: none;
      }
      html.uwu .angular-logo {
        display: none;
      }
      html.uwu .uwu-logo {
        display: block !important;
      }
    </style>

    <meta charset="utf-8" />
    <title>Angular</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Primary Meta Tags -->
    <meta name="description" content="The web development framework for building modern apps." />
    <meta name="author" content="Angular Team" />
    <meta
      name="keywords"
      content="Angular framework, TypeScript, web development, hydration, Signals, standalone components, accessibility, performance"
    />

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="48x48" href="/assets/icons/favicon-48x48.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png" />
    <link rel="manifest" href="/assets/icons/site.webmanifest" />
    <link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#e90464" />
    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
    <link rel="canonical" href="https://angular.dev" />

    <meta name="apple-mobile-web-app-title" content="Angular" />
    <meta name="application-name" content="Angular" />
    <meta name="msapplication-TileColor" content="#e90464" />
    <meta name="msapplication-config" content="/assets/icons/browserconfig.xml" />
    <meta name="theme-color" content="#ffffff" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://angular.dev/" />
    <meta property="og:title" content="Angular" />
    <meta
      property="og:description"
      content="The web development framework for building modern apps."
    />
    <meta property="og:image" content="https://angular.dev/assets/images/ng-image.jpg" />

    <!-- Twitter -->
    <meta name="twitter:site" content="@Angular" />
    <meta name="twitter:creator" content="@Angular" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://angular.dev/" />
    <meta property="twitter:title" content="Angular" />
    <meta
      property="twitter:description"
      content="The web development framework for building modern apps."
    />
    <meta property="twitter:image" content="https://angular.dev/assets/images/ng-image.jpg" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=Inter:wght@400;500;600&family=DM+Mono:ital@0;1&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
      rel="stylesheet"
    />
  </head>
  <body class="mat-typography docs-scroll-track-transparent-large">
    <adev-root></adev-root>
  </body>
</html>
